
import 'package:favourcate/core/model/meal_model.dart';
import 'package:flutter/material.dart';
import 'package:favourcate/core/extension/int_fit_ext.dart';


class GLDetailContent extends StatelessWidget {

  final GLMealModel _meal;
  const GLDetailContent(this._meal, { Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          buildBannerImage(),
          buildMakeTitle(context, '制作材料'),
          buildMakeContainer(context, buildMakeMaterial(context)),
          buildMakeTitle(context, '制作步骤'),
          buildMakeContainer(context, buildMakeSteps(context)),
          SizedBox(height: 10.px,)
        ],
      ),
    );
  }

  // 1. 图片
  Widget buildBannerImage() {
    return Container(
      width: double.infinity,
      child: Image.network(_meal.imageUrl),
    );
  }

  // 2. 制作材料
  Widget buildMakeMaterial(context) {
    return  ListView.builder(
      shrinkWrap: true, // 占据小的高度
      physics: NeverScrollableScrollPhysics(), // 禁止 listView 滚动
      itemCount: _meal.ingredients.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          color: Colors.amber,
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 8.px, horizontal: 10.px),
            child: Text(_meal.ingredients[index]),
          ),
        );
      },
    );
  }

  // 3. 制作步骤
  Widget buildMakeSteps(context) {
    return ListView.separated(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: _meal.steps.length,
      padding: EdgeInsets.zero,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: CircleAvatar(
            child: Text('#${index+1}'),
          ),
          title: Text(_meal.steps[index]),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider();
      },  
    );
  }

  // 4. 标题
  Widget buildMakeTitle(BuildContext context, String title) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.px),
      child: Text(title, style: Theme.of(context).textTheme.headline3!.copyWith(
        fontWeight: FontWeight.bold
      ),)
    );
  }
  // 5.
  Widget buildMakeContainer(context, child) {
    return Container(
      width: MediaQuery.of(context).size.width - 30.px,
      padding: EdgeInsets.all(8.px),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.px),
        border: Border.all(color: Colors.grey),
        color: Colors.white
      ),
      child: child
    );
  }
}
